<script setup lang="ts">

import { Edit, Minus, Plus } from '@element-plus/icons-vue/global';
import type Node from 'element-plus/es/components/tree/src/model/node';
import { ref } from 'vue';

export interface Tree {
  id: number
  label: string
  children?: Tree[]
}
// 将Node导出
export interface TreeNode extends Node {}

export interface NodeCallback{
  append(data: Tree): any
  remove(node: TreeNode, data: Tree): any
  edit(data: Tree): any
}

const props = defineProps<{
    data: Tree[]
    callback: NodeCallback
    style: "width: 250px"
}>()

const dataSource = ref<Tree[]>(props.data)

</script>

<template>
    <div id="tree_screen" :style=style >
        <el-tree
        style="max-width: 600px"
        :data="dataSource"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        >
        <template #default="{ node, data }">
            <span class="custom-tree-node">
            <span style="font-size: 14px;">{{ node.label }}</span>
            <span style="margin-left: 5px; 
              font-size: 16px;
              box-shadow: var(--el-box-shadow-light);
              border-radius: 5px; " >
              <el-icon class="operation-tree-item" @click="callback.edit(data)"><Edit /></el-icon>
              <el-icon class="operation-tree-item" style="margin-left: 5px" @click="callback.append(data)" ><Plus /></el-icon>
              <el-icon class="operation-tree-item" style="margin-left: 5px" @click="callback.remove(node, data)"> <Minus /></el-icon>
            </span>
            </span>
        </template>
        </el-tree>
    </div>
</template>

<style scoped>
#tree_screen {
    overflow-x: scroll;
    height: calc( 100% - 60px );
}

.operation-tree-item :hover{
  line-height: 25px;
  color: #41d7d4d3;
}
</style>